<template>
  <div>
    <van-nav-bar  @click-left="onClickLeft" title="评论" fixed left-arrow> </van-nav-bar>
    <div class="list" v-for="item in comment" :key="item.huojianid">
      <div>
        <span><img  :src="item.head_portrait" alt="" /></span> <span>{{item.uname}}</span>
        <span>{{item.time}}</span>
      </div>
      <p>
        {{item.comment_content}}
      </p>
      <ul>
        <li>
          <viewer>
            <template v-if="item.base!='undefined'">
              <img  :src="item.base" alt="" />
            </template>
            
          </viewer>
          </li>
      </ul>
    </div>
   
  </div>
</template>
<script>
export default {
  data() {
    return {
      namess: null,
      // 评论
     comment:null
    }
  },
   created () {
     this.namess = this.$route.query.name ;
    let namess = { names: this.$route.query.name };
    //获取到评论内容
    this.$post("/v1/comments/comment", namess).then((res) => {
      // console.log(res.data.data);
       this.comment=res.data.data
     console.log(res.data.data)
      // console.log("dsfasfdfdsfffdfsffsdfdsfdfdsfd")
    });
  },
  methods: {
     onClickLeft() {
     this.$router.go(-1)
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  display: block;
  width: 100%;
  height: 100%;
}

// 评论的导航栏
::v-deep .van-nav-bar__title {
  color: #a38d6b;
}
::v-deep .van-icon-arrow-left:before {
  color: #a38d6b;
}
//下面列表开始
.list {
  width: 100%;
  padding: 0rem 0.5rem;
}
.list div {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  color: #9c9c9c;
  padding: 0rem 0.2rem;
  text-align: center;
}
.list div span {
  width: 30%;
}
.list div span:nth-child(1) {
  width: 10%;
  height: 90%;
}
.list div span:nth-child(3) {
  width: 45%;
  margin-right: 1rem;
}

.list p {
  padding: 0.5rem 1rem;
  word-break: break-all;
}
.list ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 0.1rem solid #a38d6b;
}
.list ul li {
  width: 13%;
  margin-left:1rem ;
 
}
</style>